<template>
	<view class="preview">
		<view class="header">
			注:分享名片,让您的名片更靠前
		</view>
		<view class="basics">
			基础信息
		</view>
		<view class="">
			<view class="message-people">
				<view class="title">
					<image src="../../../static/微信.png" mode=""></image>
					<view class="message">
						<view class="name">先生</view>
						<view class="mesg">
							<span class="type-peo">男</span>
							<span class="type-peo">22岁</span>
							<span class="type-peo">苗族</span>
						</view>
					</view>
				</view>
				<view class="craft">
					<image src="../../../static/原点.png" mode=""></image>
					<span class="name">手机</span>
					<span style="margin-right: 10rpx;">:</span>
					<span class="peo-mesg">12345678911</span>
				</view>
				<view class="craft">
					<image src="../../../static/原点.png" mode=""></image>
					<span class="name">我的家乡</span>
					<span style="margin-right: 10rpx;">:</span>
					<span class="peo-mesg">甘肃</span>
				</view>
				<view class="craft" style="align-items: flex-start;">
					<view style="display: flex;align-items: center;">
						<image src="../../../static/原点.png" mode=""></image>
						<span class="name">工种</span>
					</view>
					<span style="margin-right: 10rpx;">:</span>
					<view class="peo-mesg">
						<view style="background: #e1e1e1;line-height: 40rpx;margin-bottom: 4rpx;" v-for="(item,index) in label" :key="index">
							{{ item }}
						</view>
					</view>
				</view>
				<view v-for="(item,index) in peopleMessages" :key="index">
					<view class="craft">
						<image src="../../../static/原点.png" mode=""></image>
						<span class="name">{{item.name}}</span>
						<span style="margin-right: 10rpx;">:</span>
						<span class="peo-mesg">{{item.value}}</span>
					</view>
				</view>
				<view class="craft">
					<image src="../../../static/原点.png" mode=""></image>
					<span class="name">标签</span>
					<span style="margin-right: 10rpx;">:</span>
					<view v-for="(item,index) in peopleLabels" :key="index">
						<span style="color: #007AFF; border: solid 1px #007AFF;border-radius: 10rpx;margin-right: 10rpx;">{{item}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="basics">
			自我介绍
		</view>
		<view style="padding: 20rpx;background: #ffffff;font-size: 32rpx;">
			测试
		</view>

		<view v-if="true" class="">
			<view class="basics">
				项目经验
			</view>
			<view class="basics-status">
				<view style="padding: 20rpx 20rpx 20rpx 92rpx;">
					<view class="pass">未通过</view>
					<view class="title-status">
						<view class="title-text">测试测试</view>
						<view @click="goExperience" style="color: #007AFF;font-size: 32rpx;">待修改</view>
					</view>
					<view class="time-address">
						<span>2020-11-05</span>
						<span>-</span>
						<span>2020-11-06</span>
						<span style="margin-left: 20rpx;">地址</span>
					</view>
					<view class="content">
						测试测试
					</view>
			
					<view class="images">
						<image src="../../../static/logo.png" mode=""></image>
						<image src="../../../static/logo.png" mode=""></image>
						<image src="../../../static/logo.png" mode=""></image>
					</view>
					<view style="color: #df0000;">
						未通过原因
					</view>
				</view>
				<view class="more-status">
					<view @click="goUpdateProject" class="more-image">
						修改项目经验
						<image src="../../../static/下箭头白.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="true">
			<view class="basics">
				职业技能
			</view>
			<view class="basics-status" style="margin-bottom: 20rpx;">
				<view style="padding: 20rpx 20rpx 20rpx 80rpx;">
					<view class="pass">未通过</view>
					<view class="title-status">
						<view class="title-text">测试测试</view>
						<view @click="goCertificate" style="color: #007AFF;font-size: 32rpx;">待修改</view>
					</view>
					<view class="time-address">
						<span>2020-11-05</span>
					</view>
			
					<view class="images">
						<image src="../../../static/logo.png" mode=""></image>
						<image src="../../../static/logo.png" mode=""></image>
						<image src="../../../static/logo.png" mode=""></image>
					</view>
					<view style="color: #df0000;">
						未通过原因
					</view>
				</view>
				<view class="more-status">
					<view @click="goUpdateCertificate" class="more-image">
						修改技能证书
						<image src="../../../static/下箭头白.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view @click="goShare" class="share">
				分享
			</view>
		</view>
		<my-draw ref="popup"></my-draw>
	</view>
</template>

<script>
	import myDraw from '../../../components/draw.vue'
	export default {
		data() {
			return {
				label:["吃苦耐劳", "尽心尽力"],
				peopleLabels: ["吃苦耐劳", "尽心尽力"],
				peopleMessages: [{
					name: "工龄",
					value: "66年"
				}, {
					name: "熟练度",
					value: "学徒工"
				}, {
					name: "人员构成",
					value: "班组"
				}, {
					name: "队伍人数",
					value: "5"
				}, {
					name: "期望地区",
					value: "地址"
				}],
			}
		},
		components:{
			'myDraw':myDraw
		},
		methods:{
			goShare(){
				this.$refs.popup.$refs.popupShow.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.preview {
		background: #d9d9d9;
		padding-bottom: 140rpx;

		.header {
			text-align: center;
			color: #ED6A0C;
			font-size: 32rpx;
			line-height: 80rpx;
			background: #FFFFFF;
		}

		.basics {
			font-size: 32rpx;
			padding: 16rpx;
			text-align: center;
		}

		.message-people {
			background: #FFFFFF;
			padding: 40rpx;

			.title {
				display: flex;
				line-height: 60rpx;
				align-items: center;
				position: relative;

				.update {
					color: #007AFF;
					font-size: 32rpx;
					position: absolute;
					top: -30rpx;
					right: 70rpx;
				}

				.type-peo {
					margin-right: 10rpx;
					color: #737373;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 30rpx;
				}

				.message {
					text-align: left;
				}
			}

			.craft {
				display: flex;
				align-items: center;
				line-height: 60rpx;

				.peo-mesg {
					color: #7f7f7f;
				}

				.name {
					width: 140rpx;
					text-align-last: justify;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
		.basics-status {
			background: #FFFFFF;
			position: relative;
			overflow: hidden;
		
			.pass {
				width: 170rpx;
				position: absolute;
				top: 23rpx;
				left: -46rpx;
				text-align: center;
				padding: 0 20rpx;
				background: #ff0000;
				color: #FFFFFF;
				font-size: 32rpx;
				-moz-transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
		
			.title-status {
				display: flex;
				justify-content: space-between;
		
				.title-text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		
			.time-address {
				line-height: 60rpx;
				color: #7f7f7f;
			}
		
			.content {
				line-height: 60rpx;
			}
		
			.images {
				display: flex;
				flex-wrap: wrap;
		
				image {
					margin-right: 40rpx;
					margin-bottom: 20rpx;
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}
			}
		
			.more-status {
				display: flex;
				justify-content: center;
				color: #FFFFFF;
				align-items: center;
				padding-bottom: 20rpx;
				position: relative;
	
				.more-image {
					width: auto;
					display: flex;
					align-items: center;
					line-height: 60rpx;
					padding: 0 20rpx;
					background: #007AFF;
					border-radius: 10rpx;
					letter-spacing: 4rpx;
		
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
		.foot{
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			padding: 30rpx;
			background: #d9d9d9;
			.share{
				text-align: center;
				width: 90vw;
				background: #007AFF;
				color: #FFFFFF;
				padding: 20rpx 0;
				border-radius: 16rpx;
			}
		}
	}
</style>
